<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/blog">博客</router-link> |
      <router-link to="/video">视频</router-link> |
      <router-link to="/login">登录</router-link> 
      <span v-if="username">
        欢迎：
        {{username}}
        <button @click="logOut">注销</button>
      </span>
    </div>
    <router-view/>
  </div>
</template>


<script>
export default {
    data(){
        return{
            username:localStorage.getItem("usr")
        }
    },
    watch:{
      "$route.path" : function(){
        this.username = localStorage.getItem("usr")
      }
    },
    methods:{
      logOut(){
        localStorage.clear();
        this.$router.push("/login")
      }
    }
}
</script>